<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flink数据处理平台</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column; /* 使页面内容从上到下排列 */
            height: 100vh; /* 使 body 高度占满整个视口高度 */
            overflow: hidden; /* 防止滚动条出现 */
        }

        .navbar {
            background-color: #333;
            overflow: hidden;
            position: fixed; /* 固定导航栏 */
            top: 0; /* 顶部对齐 */
            width: 100%; /* 宽度100% */
            z-index: 1000; /* 确保导航栏在其他内容之上 */
        }

        .navbar a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            background-color: #333;
        }

        .navbar a:hover {
            background-color: #ddd;
            color: black;
        }

        .navbar a.active {
            background-color: #00BFFF;
            color: black;
        }

        .sidebar {
            background-color: #555;
            position: fixed; /* 固定侧边栏 */
            top: 49px; /* 与顶部导航栏间隔 */
            left: 0; /* 左侧对齐 */
            width: 126px; /* 侧边栏宽度 */
            height: calc(100% - 49px); /* 高度100%减去顶部导航栏的高度 */
            overflow-y: auto; /* 允许垂直滚动 */
            z-index: 1001; /* 确保侧边栏在其他内容之上 */
        }

        .sidebar a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            background-color: #555;
        }

        .sidebar a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 修改这里，将选中项的背景色设置为色 */
        .sidebar a.active {
            background-color: #96fbc4;
            color: black;
        }

        .main-content {
            margin-top: 60px; /* 为主要内容区域留出顶部导航栏的高度 */
            margin-left: 160px; /* 为主要内容区域留出侧边栏的宽度 */
            padding: 10px;
            flex: 1; /* 使主要内容区域占据剩余空间 */
            overflow-y: auto; /* 允许垂直滚动 */
        }

        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 2px;
            margin-left: 200px; /* 为页脚留出侧边栏的宽度 */
            position: fixed; /* 绝对定位 */
            bottom: 0; /* 底部对齐 */
            width: calc(100% - 200px); /* 宽度减去侧边栏的宽度 */
            height: 36px;
            z-index: 1002; /* 使页脚在其他内容之上 */
        }

        .content {
            display: none;
        }

        .content.active {
            display: block;
        }

        /* 弹出窗口的样式 */
        .div-add {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        /* 弹出窗口的样式 */
        .modal {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 86%; /* 宽度调整为页面的90% */
            height: 85%; /* 高度调整为页面的80% */
            position: relative;
            top: 8%; /* 距离顶部5% */
            left: 10%; /* 距离左侧5% */
            overflow: auto;
        }

        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        /* 关闭按钮的 hover 效果 */
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        /* 容器样式 */
        .container {
            display: flex; /* 启用flex布局 */
            /*flex-direction: column;*/
            justify-content: space-between; /* 项目之间的间距 */
            align-items: flex-start; /* 垂直居中 */
        }

        /* 子元素样式 */
        .left, .center, .right {
            background-color: #f0f0f0;
            padding: 20px;
            flex: 1; /* 每个子元素占据相同的空间 */
            min-width: 150px; /* 可根据需要调整最小宽度 */
        }

        button {
            vertical-align: top;
            width: 120px;
            height: 28px;
            /*line-height: 24px;*/
            font-size: 16px;
            color: black;
            font-weight: bold;
        }

        label {
            /*display: inline-block;*/
            /*margin-right: 5px;*/
            line-height: 25px;
            font-size: 18px;
        }

        .input-num {
            background-color: transparent;
            width: 30px;
            align-content: center;
            text-align: center;
            font-weight: bold;
            border: none;
            vertical-align: middle;
            font-size: 15px;
            border: black;
            border-style: solid;
        }

        .input-readonly {
            background-color: transparent;
            /*width: 30px;*/
            /*align-content: center;*/
            /*text-align: center;*/
            /*font-weight: bold;*/
            /*border: none;*/
            /*vertical-align: middle;*/
            /*font-size: 15px;*/
            /*border: black;*/
            /*border-style: solid;*/
        }

        .input-id {
            background-color: transparent;
            width: 40px;
            align-content: center;
            text-align: center;
            border: none;
            vertical-align: middle;
            font-size: 15px
        }

        input {
            width: 300px;
            height: 25px;
            vertical-align: top;
        }

        input[type="radio"] {
            /*margin-left: 5px;*/
            width: 25px;
        }

        input[type="checkbox"] {
            /*margin-left: 5px;*/
            width: 25px;
        }

        textarea {
            width: 420px;
            height: 520px;
            min-height: 200px;
            padding: 0;
        }

        table {
            width: 100%;
            margin: 1px auto;
            border-collapse: collapse;
        }

        th, td {
            /*border: 1px solid #ddd;*/
            /*padding: 8px;*/
            text-align: left;
        }

        h1, h2, h3, h4, h5, h6 {
            text-align: center;
        }

        /* 定义链接的基本样式 */
        .aLinkClass {
            color: #00F; /* 设置链接文字颜色为蓝色 */
            font-family: Arial, sans-serif; /* 设置字体 */
            text-decoration: underline; /* 下划线 */
        }

        /* 定义鼠标悬停时的样式 */
        .aLinkClass:hover {
            color: #F00; /* 鼠标悬停时文字颜色变为红色 */
            background-color: #FF0; /* 鼠标悬停时背景颜色变为黄色 */
            /*text-decoration: none; !* 去除下划线 *!*/
        }

    </style>
</head>
<body>

<div class="navbar">
    <a href="/">首页</a>
    <a href="/user">用户管理</a>
    <a href="/role">角色管理</a>
    <a href="/app" class="active">应用管理</a>
    <a href="/db/h2" target="_blank">数据库</a>
    <a href="/about">关于我们</a>
</div>

<div class="sidebar">
    <!--    所有jobs-->
    <a href="#home" onclick="goContent('home')">任务列表</a>
    <!--    单mission的详情-->
    <a href="#mission" onclick="goContent('mission')">任务管理</a>
    <!--    单job的详情-->
    <a href="#job" onclick="goContent('job')">任务详情</a>
</div>
<!--<div hidden="hidden">-->
<div th:if="${mission}">
    <!--    可以是：mission则到任务管理页面；空就到home-->
    <input name="missionId" id="missionId" class="input-num" readonly="readonly" th:value="${mission.id}"/>
</div>
<div th:if="${job}">
    <!--    job则到任务详情页;空就到home-->
    <input name="jobId" id="jobId" class="input-num" readonly="readonly" th:value="${job.id}"/>
</div>
<div class="main-content">
    <div id="home" class="content active">
        <h1>应用管理</h1>
        <div>
            <table border="1" cellspacing="0" align="center">
                <thead style="font-weight: bold">
                <tr>
                    <td th:text="序列" width="4%"></td>
                    <td th:text="任务ID" width="5%"></td>
                    <td th:text="Job名称" width="5%"></td>
                    <td th:text="是否完成" width="6%"></td>
                    <td th:text="完成状态" width="7%"></td>
                    <td th:text="FlinkJobID" width="10%"></td>
                    <td th:text="任务情况" width="6%"></td>
                    <td th:text="开始时间" width="9%"></td>
                    <td th:text="完成时间" width="9%"></td>
                </tr>
                </thead>
                <tbody>
                <tr th:each="job, status  : ${jobs}">
                    <td th:text="${status.index}"></td>
                    <td th:text="${job.id}"></td>
                    <td th:text="${job.name}"></td>
                    <td th:text="${job.finish}"></td>
                    <td th:text="${job.statusNote}"></td>
                    <td th:text="${job.flinkJobId}"></td>
                    <td th:text="${job.status}"></td>
                    <td><span th:text="${#temporals.format(job.time, 'yyyy-MM-dd HH:mm:ss')}"></span></td>
                    <td><span th:text="${#temporals.format(job.timeFinish, 'yyyy-MM-dd HH:mm:ss')}"></span></td>
                    </th>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div id="mission" class="content">
        <h1>Mission任务Job管理</h1>
        <div>
            <div th:if="${mission}" style="text-align: center">
                <label for="jobMissionId">Mission任务ID:</label>
                <input name="jobMissionId" id="jobMissionId" readonly="readonly"
                       th:value="${mission.id}" class="input-readonly"/>
                <label for="jobMissionName">Mission任务名称:</label>
                <input name="jobMissionName" id="jobMissionName" readonly="readonly"
                       th:value="${mission.name}" class="input-readonly"/>
            </div>
            <h3>Job列表</h3>
            <table border="1" cellspacing="0" align="center">
                <thead style="font-weight: bold">
                <tr>
                    <td th:text="序列" width="4%"></td>
                    <td th:text="任务ID" width="5%"></td>
                    <td th:text="Job名称" width="5%"></td>
                    <td th:text="任务正常否" width="6%"></td>
                    <td th:text="是否完成" width="6%"></td>
                    <td th:text="任务状态" width="7%"></td>
                    <td th:text="FlinkJobID" width="10%"></td>
                    <td th:text="开始时间" width="9%"></td>
                    <td th:text="完成时间" width="9%"></td>
                </tr>
                </thead>
                <tbody>
                <tr th:each="job, status  : ${jobs}">
                    <td th:text="${status.index}+1"></td>
                    <td th:text="${job.id}"></td>
                    <td th:text="${job.name}"></td>
                    <td th:text="${job.status}"></td>
                    <td th:text="${job.finish}"></td>
                    <td th:text="${job.statusNote}"></td>
                    <td th:text="${job.flinkJobId}"></td>
                    <td><span th:text="${#temporals.format(job.time, 'yyyy-MM-dd HH:mm:ss')}"></span></td>
                    <td><span th:text="${#temporals.format(job.timeFinish, 'yyyy-MM-dd HH:mm:ss')}"></span></td>
                    </th>
                </tr>
                </tbody>
            </table>
        </div>
        <!--        </div>-->
    </div>
    <div id="job" class="content">
        <h1>Job任务详情</h1>
    </div>
</div>

<script>

    // function openJobsByMissionId(missionId) {
    //     console.log("openJobs by missionId: " + missionId);
    //     var missionModal = document.getElementById("missionJobsModal");
    //     // 打开弹出窗口
    //     missionModal.style.display = "block";
    //     // 关闭弹出窗口
    //     var spanMission = missionModal.getElementsByClassName("close")[0];
    //     spanMission.onclick = function () {
    //         missionModal.style.display = "none";
    //     };
    // }
    //
    // function openJob(jobId) {
    //     console.log("openJobs jobId: " + jobId);
    //     // 弹出框
    //     var missionModal = document.getElementById("jobModal");
    //     // 打开弹出窗口
    //     missionModal.style.display = "block";
    //     // 关闭弹出窗口
    //     var spanMission = missionModal.getElementsByClassName("close")[0];
    //     spanMission.onclick = function () {
    //         missionModal.style.display = "none";
    //     };
    // }

    function goContent(contentId) {
        // 移除所有侧边栏链接的 'active' 类
        document.querySelectorAll('.sidebar a').forEach(function (link) {
            link.classList.remove('active');
        });
        var contents = document.getElementsByClassName('content');
        for (var i = 0; i < contents.length; i++) {
            contents[i].style.display = 'none';
        }
        // 为被点击的侧边栏链接添加 'active' 类
        var sidebarLinks = document.querySelectorAll('.sidebar a');
        for (var i = 0; i < sidebarLinks.length; i++) {
            if (sidebarLinks[i].getAttribute('href') === '#' + contentId) {
                sidebarLinks[i].classList.add('active');
            }
        }
        document.getElementById(contentId).style.display = 'block';
    }

    // 初始化显示首页内容
    document.addEventListener('DOMContentLoaded', function () {
        console.log("go home:");
        goContent('home');
    });
    window.onload = function () {
        // goContent('home');
        var missionId = document.getElementById("missionId");
        if (missionId) {
            console.log("1pointer:" + missionId.value);
            if (missionId.value) {
                console.log("missionId:" + missionId.value);
                goContent('mission');
            }
        }
    };

</script>

</body>
</html>